<template>
    <div class="yushou">
        <header>
            <el-form :model="taskForm" ref="taskForm" label-width="90px" class="demo-ruleForm" style="display: flex;">
                <el-form-item label="单据编号:" prop="code" style="width: 400px;">
                    <el-input v-model="taskForm.modeCode"></el-input>
                </el-form-item>
                <el-form-item label="单据日期:" prop="code" style="width: 500px;">
                    <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="客户:" prop="code" v-if="!isCollapsed">
                    <el-select v-model="queryInfo.customerId" placeholder="请选择">
                        <el-option v-for="item in IDoptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否通过:" prop="code" style="width: 300px;" v-if="!isCollapsed">
                    <el-select v-model="queryInfo.isApproved" placeholder="请选择">
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-form :model="taskForm" ref="taskForm" label-width="100px" class="demo-ruleForm" style="display: flex;">
                <el-form-item label="是否关闭:" prop="code" style="width: 300px; display: block;" v-if="!isCollapsed">
                    <el-select v-model="queryInfo.isClosed" placeholder="请选择">
                        <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否作废:" prop="code" style="width: 300px;" v-if="!isCollapsed">
                    <el-select v-model="queryInfo.isVoided" placeholder="请选择">
                        <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="getTaskList()"><i class="el-icon-search"></i>查询</el-button>
                    <el-button @click="resetAllForm()"><i class="el-icon-refresh-right"></i>重置</el-button>
                    <span @click="toggleCollapse" style="color: #1d93ff; cursor: pointer;">{{ isCollapsed ? '展开' : '收起'
                        }}</span>
                    <i v-if="isCollapsed" class="el-icon-arrow-down"></i>
                    <i v-else class="el-icon-arrow-up"></i>
                </el-form-item>
            </el-form>
        </header>
        <div class="content-tab">
            <div class="tabl">
                <span @click="addShowInit" style="margin-right: 10px; color: #1d93ff">
                    <i class="el-icon-plus"></i>
                    新增
                </span>
                <span @click="addShowInit" style="margin-right: 10px; color: #1d93ff">
                    <i class="el-icon-upload2"></i>
                    导出
                </span>
                <span @click="addShowInit" style="margin-right: 10px; color: #1d93ff">
                    <i class="el-icon-upload"></i>
                    导入
                </span>
                <el-button v-show="selectedRows.length > 0" disabled>
                    批量删除
                </el-button>
                <span style="margin-right: 10px;">已选择 <span style="color: #1d93ff;">{{ selectedCount }} </span>项</span>
                <span style="margin-right: 10px; color: #1d93ff" @click="clearSelection">
                    清空
                </span>
            </div>
        </div>
        <div class="content">
            <el-table ref="multipleTable" max-height="650px" :data="taskList" border style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="49" fixed>
                </el-table-column>
                <el-table-column fixed="left" label="#" prop="id">
                    <template slot-scope="scope">
                        <span>{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed label="单据编号" prop="billNo" width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.billNo }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="单据日期" prop="billDate" width="150">
                    <template slot-scope="scope">
                        <span>{{ scope.row.billDate }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="客户" prop="customerId_dictText">
                    <template slot-scope="scope">
                        <span>{{ scope.row.customerId_dictText }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否红字" prop="isRubric_dictText">
                    <template slot-scope="scope">
                        <span>{{ scope.row.isRubric_dictText }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="金额" prop="amt">
                    <template slot-scope="scope">
                        <span>{{ scope.row.amt }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="已核销金额" prop="checkedAmt">
                    <template slot-scope="scope">
                        <span>{{ scope.row.checkedAmt }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="处理状态" prop="billProcStatus_dictText">
                    <template slot-scope="scope">
                        <span>{{ scope.row.billProcStatus_dictText }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否通过" prop="isApproved_dictText">
                    <template slot-scope="scope">
                        <span>{{ scope.row.isApproved_dictText }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否关闭" prop="isClosed_dictText">
                    <template slot-scope="scope">
                        <span>{{ scope.row.isClosed_dictText }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否作废" prop="isVoided_dictText">
                    <template slot-scope="scope">
                        <span>{{ scope.row.isVoided_dictText }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark">
                    <template slot-scope="scope">
                        <span>{{ scope.row.remark }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="生效时间" prop="effectiveTime">
                    <template slot-scope="scope">
                        <span>{{ scope.row.effectiveTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="审核人" prop="approverId_dictText">
                    <template slot-scope="scope">
                        <span>{{ scope.row.approverId_dictText }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="流程" prop="flowId">
                    <template slot-scope="scope">
                        <span>{{ scope.row.flowId }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="createTime">
                    <template slot-scope="scope">
                        <span>{{ scope.row.createTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建人" prop="createBy_dictText">
                    <template slot-scope="scope">
                        <span>{{ scope.row.createBy_dictText }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建部门" prop="sysOrgCode_dictText">
                    <template slot-scope="scope">
                        <span>{{ scope.row.sysOrgCode_dictText }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="修改人" prop="updateBy_dictText">
                    <template slot-scope="scope">
                        <span>{{ scope.row.updateBy_dictText }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="修改时间" prop="updateTime">
                    <template slot-scope="scope">
                        <span>{{ scope.row.updateTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="120">
                    <template slot-scope="scope">
                        <span v-if="scope.row.billProcStatus_dictText == '审核完成'" style="color: #ccc;">编辑 | </span>
                        <span v-else @click="handleEdit(scope.row.id)" style="color: #1d93ff;">编辑 | </span>
                        <el-dropdown>
                            <span class="el-dropdown-link" style="color: #1d93ff;">
                                更多<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item style="color: #ccc;">删除</el-dropdown-item>
                                <el-dropdown-item v-if="scope.row.billProcStatus_dictText == '审核完成'"
                                    style="color: #ccc;">审核</el-dropdown-item>
                                <el-dropdown-item v-else>审核</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog :title="id ? '修改' : '添加'" :visible.sync="dialogFormVisible" width="90%" style="overflow: hidden;">
            <div style="display: flex;">
                <el-form :model="taskForm" ref="taskForm" label-width="100px" class="demo-ruleForm" style="width: 33%;">
                    <el-form-item label="处理状态:">
                        <el-select v-model="value" placeholder="编制中" disabled style="width: 100%; ">
                            <el-option v-for="item in options4" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="创建时间:" v-if="!isCollapsed2">
                        <el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input1" disabled>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="生效时间:" v-if="!isCollapsed2">
                        <el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input1" disabled>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="修改时间:" v-if="!isCollapsed2">
                        <el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input1" disabled>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="单据编号:" v-if="id">
                        <el-input v-model="taskForm.finPaymentEntryList.billNo">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="单据编号:" v-else>
                        <el-input v-model="taskForm.billNo">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="客户:">
                        <el-select v-model="taskForm.customerId" style="width: 100%; ">
                            <el-option v-for="item in IDoptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-form :model="taskForm" ref="taskForm" label-width="100px" class="demo-ruleForm"
                    style="width: 33%; ">
                    <el-form-item label="是否通过:" style=" float: left;">
                        <el-select v-model="value" placeholder="" disabled style="width: 100px;">
                            <el-option v-for="item in options4" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否关闭:" style="float: right;">
                        <el-select v-model="value" placeholder="" disabled style="width: 100px; ">
                            <el-option v-for="item in options4" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="创建人:" v-if="!isCollapsed2">
                        <el-select v-model="value" placeholder="" disabled style="width: 100%; ">
                            <el-option v-for="item in options4" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="审核人:" v-if="!isCollapsed2">
                        <el-select v-model="value" placeholder="" disabled style="width: 100%; ">
                            <el-option v-for="item in options4" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="修改人:" v-if="!isCollapsed2">
                        <el-select v-model="value2" placeholder="" disabled style="width: 100%; ">
                            <el-option v-for="item in options4" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="单据日期:">
                        <el-date-picker v-model="taskForm.billDate" type="date" placeholder="选择日期" style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="是否红字:">
                        <el-select v-model="taskForm.isRubric" placeholder="" style="width: 100%; ">
                            <el-option v-for="item in options8" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-form :model="taskForm" ref="taskForm" label-width="100px" class="demo-ruleForm"
                    style="width: 33%; ">
                    <el-form-item label="是否作废:">
                        <el-select v-model="value" placeholder="" style="width: 100px; float: left;" disabled>
                            <el-option v-for="item in options4" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <span @click="toggleCollapse2" style="color: #1d93ff; cursor: pointer; float: right;">{{
                            isCollapsed2 ?
                                '展开' :
                                '收起'
                        }} <i v-if="isCollapsed2" class="el-icon-arrow-down"></i>
                            <i v-else class="el-icon-arrow-up"></i></span>
                    </el-form-item>
                    <el-form-item label="创建部门:" v-if="!isCollapsed2">
                        <el-select v-model="value" placeholder="" disabled style="width: 100%; ">
                            <el-option v-for="item in options4" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="流程:" style="margin-bottom: 84px;" v-if="!isCollapsed2">
                        <el-input v-model="taskForm.code" placeholder="" style="width: 100%; ">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="制单人:">
                        <el-select v-model="value2" placeholder="" disabled style="width: 100%; ">
                            <el-option v-for="item in options4" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="金额:">
                        <el-input v-model="taskForm.finPaymentEntryList.amt" placeholder="" style="width: 100%; "
                            disabled>
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
            <el-form :model="taskForm" ref="taskForm" label-width="100px" class="demo-ruleForm" style="width: 100%; ">
                <el-form-item label="备注:">
                    <el-input type="textarea" :rows="1" v-model="taskForm.remark" placeholder="" style="width: 100%; ">
                    </el-input>
                </el-form-item>
                <el-form-item label="附件:">
                    <el-upload class="upload-demo" action="" :limit="1">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip"></div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span style="color: #1d93ff; margin-left: 50px; margin-bottom: 22px;">明细</span>
            <div style="overflow: hidden;">
                <el-table max-height="650px" :data="taskForm.finPaymentEntryList" style="margin-left: 10px;">
                    <el-table-column type="selection" width="49" fixed></el-table-column>
                    <el-table-column label="分录号" prop="entryNo">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.entryNo" placeholder="" style="width: 100%;"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="源单分录号" prop="sourceEntryNo">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.sourceEntryNo" placeholder="" style="width: 100%;"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="结算方式" prop="receiptType">
                        <template>
                            <el-select v-model="taskForm.receiptType" placeholder="" style="width: 100%;">
                                <el-option v-for="item in options6" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="资金账户" prop="id">
                        <template>
                            <el-select v-model="taskList.id" placeholder="" style="width: 100%;">
                                <el-option v-for="item in options7" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="金额" prop="amt">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.amt" placeholder="" style="width: 100%;"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" prop="remark">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.remark" placeholder="" style="width: 100%;"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注2" prop="remark2">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.remark2" placeholder="" style="width: 100%;"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注3" prop="remark3">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.remark3" placeholder="" style="width: 100%;"></el-input>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div style="display: flex;flex-direction: row-reverse;">
                <el-button v-if="id" type="primary" @click="editForm('taskForm')">编辑</el-button>
                <el-button v-else type="success" @click="addForm('taskForm')">确定</el-button>
                <el-button @click="resetForm('taskForm')">取消</el-button>
            </div>
        </el-dialog>
        <pagination :page="queryInfo.pageNo" :componentTotal="taskTotal" @changeRows="setRows" @changePage="setPage">
        </pagination>
    </div>
</template>

<script>
import Pagination from "../../Pagination.vue";
export default {
    data() {
        return {
            taskTotal: 0,
            selectedRows: [], // 用于存储选中的行
            value1: "",
            value2: "",
            input1: "",
            options2: [{
                value: 1,
                label: '是'
            }, {
                value: 0,
                label: '否'
            }],
            options3: [{
                value: 1,
                label: '是'
            }, {
                value: 0,
                label: '否'
            }],
            options4: [{
                value: 1,
                label: '是'
            }, {
                value: 0,
                label: '否'
            }],

            IDoptions: [],
            options6: [{
                value: '101',
                label: '现金'
            }, {
                value: '101',
                label: '银行汇款'
            }],
            options7: [{
                value: '101',
                label: '11050169520000000***'
            }],
            options8: [{
                value: '1',
                label: '是'
            }, {
                value: '0',
                label: '否'
            }],
            value: '',
            id: "",
            taskList: [],
            taskForm: {
                amt: "",
                billDate: "2024-10-26",
                billNo: "",
                billProcStatus: "13",
                checkedAmt: 0,
                customerId: "",
                deductedAmt: 0,
                remark: "",
                isRubric: "1",
                receiptType: "101",
                finPaymentEntryList: [
                    {
                        id: "17299116391160209368",
                        bankAccountId: "1250246233599578114",
                        entryNo: 10,
                        sourceEntryNo: "",
                        amt: "",
                        remark: "",
                        remark2: "",
                        remark3: "",
                        settleMethod: "11",
                    }
                ]
            },
            dialogFormVisible: false,
            isCollapsed: true,
            isCollapsed2: false,
            queryInfo: {
                billNo: "",
                isClosed: "",
                _t: new Date().getTime(),
                column: 'createTime',
                order: 'desc',
                pageNo: 1,
                pageSize: 10
            },
            token: sessionStorage.token
        }
    },
    methods: {
        toggleCollapse2() {
            this.isCollapsed2 = !this.isCollapsed2;
        },
        toggleCollapse() {
            this.isCollapsed = !this.isCollapsed;
        },
        resetAllForm() {
            this.queryInfo = {
                billNo: "",
                isClosed: "",
                _t: new Date().getTime(),
                column: 'createTime',
                order: 'desc',
                pageNo: 1,
                pageSize: 10
            };
            this.getTaskList()
        },
        async getTaskList() {
            const { data: res } = await this.axios.get("finance/finPayment/list/299", {
                params: this.queryInfo,
            });
            if (res.code != 200) return this.$message.error(res.message);
            this.taskList = res.result.records;
            this.taskTotal = res.result.total;

        },
        // 修改
        async handleEdit(id) {
            this.value2 = "管理员"
            this.id = id;
            const { data: res } = await this.axios.get(`finance/finPayment/queryFinReceiptEntryByMainId`, {
                params: {
                    id: id,
                    _t: new Date().getTime(),
                }
            });
            this.taskForm.finPaymentEntryList = res.result;
            this.dialogFormVisible = true
        },
        editForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (!valid) return false;
                this.taskForm.amt = Number(this.taskForm.finPaymentEntryList[0].amt)
                const { data: res } = await this.axios.put("finance/finReceivable/edit", this.taskForm);
                if (res.code != 200) return this.$message.error("编辑失败");
                this.$message.success("编辑成功");
                this.dialogFormVisible = false;
                this.resetForm();
                this.getTaskList();
            });
        },
        // 添加
        addForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (!valid) return false;
                this.taskForm.amt = Number(this.taskForm.finPaymentEntryList[0].amt)
                this.taskForm.isRubric = Number(this.taskForm.isRubric)
                const { data: res } = await this.axios.post("finance/finPayment/add", this.taskForm);
                if (res.code != 200) return this.$message.error("添加失败");
                this.$message.success("添加成功");
                this.dialogFormVisible = false;
                this.resetForm();
                this.getTaskList()
            });
        },
        addShowInit() {
            this.dialogFormVisible = true;
            this.id = "";
            this.getName()
            this.getUserName()
        },
        async getName() {
            const { data: res } = await this.axios.put("sys/fillRule/executeRuleByCode/receipt_bill_no", {});
            this.taskForm.billNo = res.result;
        },
        async getUserName() {
            const { data: res } = await this.axios.get("sys/dict/getDictItems/bas_customer,name,id", {});
            this.IDoptions = res.result.map(item => ({
                value: item.value,
                label: item.text
            }));
        },
        resetForm() {
            this.dialogFormVisible = false;
            this.id = "";
            this.taskForm = {
                amt: "",
                billDate: "2024-10-26",
                billNo: "",
                billProcStatus: "13",
                checkedAmt: 0,
                customerId: "",
                deductedAmt: 0,
                remark: "",
                isRubric: "1",
                receiptType: "101",
                finPaymentEntryList: [
                    {
                        id: "1850048309335429122",
                        bankAccountId: "1250246233599578114",
                        entryNo: 10,
                        sourceEntryNo: "",
                        amt: "",
                        remark: "",
                        remark2: "",
                        remark3: "",
                        settleMethod: "11",
                    }
                ]
            }
        },
        // 多选
        handleSelectionChange(selection) {
            this.selectedRows = selection;
        },
        clearSelection() {
            this.$refs.multipleTable.clearSelection();
            this.selectedRows = [];
        },
        // 分页器
        setRows(val) {
            this.queryInfo.pageSize = val;
            this.getTaskList();
        },
        setPage(val) {
            this.queryInfo.pageNo = val;
            this.getTaskList();
        },
    },
    computed: {
        selectedCount() {
            return this.selectedRows.length;
        }
    },
    mounted() {
        this.getTaskList();
        this.getUserName()
    },
    components: {
        Pagination,
    },
}
</script>

<style lang="scss" scoped>
.yushou {
    margin-top: 30px;
    background-color: #fff;
    padding: 20px;

    header {
        padding-top: 10px;

        span {
            margin-left: 10px;
            font-size: 18px;
        }
    }
}
</style>